<template>
    <el-popover
        v-model:visible="visible"
        :show-arrow="false"
        :width="260"
        :offset="0"
        :hide-after="0"
        placement="bottom-start"
        trigger="click"
        popper-class="sdoc-popover"
        @before-leave="handleBeforeLeave">
        <div class="content">
            <div class="left">
                <el-input v-model="text" style="width: 100%;" placeholder="请输入链接地址"></el-input>
            </div>
            <div class="right">
                <span @click="handleGo">跳转</span>
            </div>
        </div>
        <template #reference>
            <div class="headle"> {{ text }} </div>
        </template>
    </el-popover>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const visible = ref(true)
const text = defineModel()
const emit = defineEmits(['leave'])
const handleBeforeLeave = () => {
    emit('leave')
}
const __wApi = (window as any).dku
const handleGo = () => {
    if (text.value) __wApi.openUrl(text.value)
}
</script>

<style scoped lang="scss">
.headle {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 32px;
    line-height: 30px;
    color: #bbb;
    border: 1px solid #fff;
}
.content{
    display: flex;
    align-items: center;
    .left{
        flex: 1;
    }
    .right{
        font-size: 12px;
        margin-left: 10px;
        margin-right: 6px;
        span{
            cursor: pointer;
            white-space: nowrap;
            color: var(--el-color-primary);
            &:hover{
                color: var(--el-color-primary-light-3)
            }
        }
    }
}
</style>